<template>
	<div class="music_player">
		<div class="lyricitem">
			
		</div>
		<audio id="audioref" :src="viderurl" @timeupdate="updateTime" :loop="true" style="display: block;"></audio>
		<div class="music-player-left">
			<div class="music-player-left-img">
				<img :src="img" />
				<div class="ckck">
					<i style="font-size: 32px;" class="iconfont icon-caozuo-quanping-zhankai"></i>
				</div>
			</div>
			<div class="music-player-left-text">
				<p v-if="name" :title="name"> {{ name }} </p>
				<p v-if="gs" :title="gs"> {{ gs }} </p>
			</div>
		</div>
		<div class="music-player-player">
			<div class="music-player-player-set">
				<div class="set-left">
					<i style="font-size: 30px;" class="iconfont icon-danquxunhuan" title="单曲播放" v-show ="playmode"></i>
					<i style="font-size: 25px;" class="iconfont icon-xunhuanbofang" title="循环播放" v-show ="!playmode"></i>
				</div>
				<div><i class="iconfont icon-zuobofang"></i></div>
				 <div class="set-main" @click="clickplay">
						<span v-show="type"><i style="font-size: 18px;padding-left: 2px;" class="iconfont icon-play"></i></span>
						<span v-show = '!type'><i style="font-size: 16px;" class="iconfont icon-zanting"></i></span>
				</div>
				<div><i class="iconfont icon-youbofang"></i></div>
				<div class="set-right">
					<div>词</div>
				</div>
			</div>
			<div class="music-player-player-jdt">
				<div style="width: 100%;display: flex;margin-top: 8px;"><span style="width: 15%;">{{ current | somgtime }}</span>
					<div style="width: 70%;">
						<Slider @on-change="changevalue" v-model="value"></Slider>
					</div><span style="width: 15%;">{{ Totalduration | somgtime }}</span>
				</div>
			</div>
		</div>
		<div class="music-player-right">
			<div class="music-player-player-progressbar">
				<div class="music-player-player-progressbar-left">
					<span style="padding: 2px 8px;border: 1px solid red;border-radius: 5px;">标准</span>
				</div>
				<div class="music-player-player-progressbar-main">
					<span><i class="iconfont icon-yinliang"></i></span><label>
						<Slider @on-change="changevalues" v-model="values"></Slider>
					</label>
				</div>
				<div class="music-player-player-progressbar-right">
					<span>三</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex"

	export default {
		data() {
			return {
				Totalduration: 0,
				current: 0,
				value: 0,
				values: 50,
				playmode: true,   //播放模式
				type: true,
				viderurl: '',
				gs:'',
				img:'',
				name:''
			}
		},
		computed: {
			...mapState({
				viderObj: state => state.songobj
			})
		},
		watch: {
			values(e){
				let audioref = document.getElementById('audioref');
				audioref.volume = e / 100;
			},
			viderObj(e) {
				console.log(e)
				this.playmusic(e);
				deep: true
			}
		},
		methods: { 
			changevalues(e){
				let audioref = document.getElementById('audioref');
				audioref.volume = e / 100;
			},
			changevalue(e){
				let audioref = document.getElementById('audioref');
				audioref.currentTime = (e/100) * this.Totalduration;
			},
			updateTime(e){      //获取audio当前播放时间
				this.current = parseInt(e.target.currentTime);
				this.value = parseInt(((parseInt(e.target.currentTime)) / this.Totalduration) *100);
			},
			clickplay() { //播放暂停音乐
				let audioref = document.getElementById('audioref');
				if (this.type) {
					audioref.play();
					this.type = false;
				} else {
					audioref.pause();
					this.type = true;
				}

			},
			defmusic(id) {   //默认播放当前歌曲
			this.$api.song_detail({ids:id}).then(res=>{
				this.$api.song_url({
					id: res.songs[0].id
				}).then(ress => {
					let obj = {
						img:res.songs[0].al.picUrl,
						name:res.songs[0].name,
						gs:res.songs[0].ar[0].name,
						zsc:res.songs[0].dt,
						url:ress.data[0].url
					}
					this.$store.commit('SongSET', obj);
					this.$nextTick(()=>{
						this.playmusic(obj);
					})
					
				})
			})
			},
			playmusic(e){
				console.log(e)
				const dt = new Date(e.zsc)
				const mm = (dt.getMinutes() + '').padStart(2, '0')
				const ss = (dt.getSeconds() + '').padStart(2, '0')
				this.Totalduration = parseInt(mm) * 60 + parseInt(ss);
				let audioref = document.getElementById('audioref');
				console.log(audioref);
				if (!e.url) {
					this.$Message.warning('该歌曲无法播放');
				} else {
					this.img = e.img;
					this.gs = e.gs;
					this.name = e.name;
					this.viderurl = e.url;
					this.$nextTick(() => {
						audioref.play();
						this.type = false;
					})
					console.log(this.viderurl)
				}
			}
		},
		mounted() {
		},
		created() {
			this.defmusic(1378926217);
		},
		filters: {
			somgtime(s) {
				//计算分钟
				    //算法：将秒数除以60，然后下舍入，既得到分钟数
				    var h;
				    h  =   Math.floor(s/60);
				    //计算秒
				    //算法：取得秒%60的余数，既得到秒数
				    s  =   s%60;
				    //将变量转换为字符串
				    h    +=    '';
				    s    +=    '';
				    //如果只有一位数，前面增加一个0
				    h  =   (h.length==1)?'0'+h:h;
				    s  =   (s.length==1)?'0'+s:s;
				    return h+':'+s;
			}
		}
	}
</script>

<style scoped="scoped">
	.music_player {
		position: relative;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
	}
	.lyricitem{
		bottom: 85px;
		display: none;
		position: fixed;
		height: calc(100vh - 135px);
		width: 100%;
	}
	.music-player-left {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
	}

	.music-player-player {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex: 2;
		padding: 0 20px;
	}

	.music-player-player-jdt {
		display: flex;
		width: 100%;
		height: 30px;
	}

	.music-player-player-jdt div {
		text-align: center;
	}

	.music-player-player .music-player-player-set {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-around;
	}

	.music-player-player-set div {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 35px;
		height: 35px;
		cursor: pointer;
	}

	.music-player-player .music-player-player-set .set-main {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		width: 35px;
		height: 35px;
		background-color: #D9D9D9;
		border-radius: 50%;
	}
	.music-player-player .music-player-player-set .set-main span{
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}
	.music-player-player .music-player-player-set .set-left {
		width: 35px;
		height: 35px;
	}

	.music-player-player .music-player-player-set .set-right {
		width: 35px;
		height: 35px;
	}

	.music-player-right {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.music-player-player-progressbar {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.music-player-player-progressbar div {
		margin-left: 5px;
	}

	.music-player-player-progressbar-left {
		flex: 1;
		display: flex;
	}

	.music-player-player-progressbar-main {
		display: flex;
		align-items: center;
		flex: 2;
	}

	.music-player-player-progressbar-main label {
		width: 100px;
	}

	.music-player-player-progressbar-right {
		display: flex;
		justify-content: center;
		flex: 1;
	}

	.music-player-left-img {
		position: relative;
		width: 50px;
		height: 50px;
		margin-right: 5px;
		cursor: pointer;
	}
	.ckck{
		transition: opacity 0.5s;
		position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #999999;opacity: 0;color: #FFFFFF;display: flex;justify-content: center;align-items: center;
	}
	.music-player-left-img:hover .ckck{
		opacity: 0.7!important;
	}
	.music-player-left-img img {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.music-player-left-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding: 5px 0;
	}

	.music-player-left-text p:nth-child(1) {
		font-size: 15px;
		width: 150px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		text-overflow: ellipsis;
		cursor: pointer;
	}
	
	>>>.ivu-slider-wrap {
		margin: 9px 0;
	}
</style>
